<#include "/common/layout.html">
<@body>
<style>
    .content-window-card {
        position: relative;
        box-shadow: none;
        bottom: 0;
        left: 0;
        width: auto;
        padding: 0;
    }

    .content-window-card p {
        height: 2rem;
    }

    .custom-info {
        border: solid 1px silver;
    }

    div.info-top {
        position: relative;
        background: none repeat scroll 0 0 #F9F9F9;
        border-bottom: 1px solid #CCC;
        border-radius: 5px 5px 0 0;
    }

    div.info-top div {
        display: inline-block;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        line-height: 31px;
        padding: 0 10px;
    }

    div.info-top img {
        position: absolute;
        top: 10px;
        right: 10px;
        transition-duration: 0.25s;
    }

    div.info-top img:hover {
        box-shadow: 0px 0px 5px #000;
    }

    div.info-middle {
        font-size: 12px;
        padding: 10px 6px;
        line-height: 20px;
    }

    div.info-bottom {
        height: 0px;
        width: 100%;
        clear: both;
        text-align: center;
    }

    div.info-bottom img {
        position: relative;
        z-index: 104;
    }

    span {
        margin-left: 5px;
        font-size: 11px;
    }

    .info-middle img {
        float: left;
        margin-right: 6px;
    }
</style>
<body class="gray-bg">
	<div class="wrapper">
		<section class="content">
		    <div class="row">
		        <div class="col-xs-12">
		            <div class="box">
		                <div class="form-inline">
		                    <div class="box-header">
		                        <div class="input-group">
		                            <input type="text" name="searchfor" id="searchfor" class="form-control"
		                                placeholder="请输入搜索关键字">
		                        </div>
		                    </div>
		                </div>
		                <div class="box-body">
		                    <div id="container" class="content col-md-8" style="height:600px;"></div>
		                    <div class="col-md-4">
		                        <form role="form">
		                            <div class="box-body">
		                                <div class="form-group">
		                                    <label for="positionName">位置名称</label>
		                                    <input type="text" class="form-control" id="positionName">
		                                </div>
		                                <div class="form-group">
		                                    <label for="detailAddress">详细地址</label>
		                                    <input type="text" class="form-control" id="detailAddress">
		                                </div>
		                                <div class="form-group">
		                                    <label for="longitudeAndLatitude">地址经纬度</label>
		                                    <input type="text" class="form-control" id="longitudeAndLatitude">
		                                </div>
		                            </div>
		                        </form>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</section>
	</div>
</body>
</@body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=0a80ff5760adb5cf9b79d320391b1dc7"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [113.92083, 22.51455],
        zoom: 16
    });
    AMap.plugin(['AMap.ToolBar', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], function () {
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
        //初始化信息窗口
        var infoWindow = new AMap.InfoWindow({
            autoMove: true,
            offset: { x: 0, y: -30 }
        });
        //原位置点信息
        var placeSearchInit = new AMap.PlaceSearch({
            pageSize: 1,
            extensions: "all",
        });
        var marker = new AMap.Marker({});
        //输入提示
        var autoOptions = {
            input: "searchfor"
        };
        var auto = new AMap.Autocomplete(autoOptions);
        //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            //判断是否有效位置
            if ($.common.isEmpty(e.poi.location)) {
                $("#searchfor").val("");
                $("#searchfor").focus();
                $("#searchfor").next().css("color", "red").html("无法准确定位所选择的地址，请重新输入搜索关键字");
                return;
            }
            //清空提示信息
            $(".form-control").next().html("");
            marker.setPosition(e.poi.location);
            marker.setMap(map);
            map.setCenter(marker.getPosition());
            var s = [];
            s.push("<b>名称：" + e.poi.name + "</b>");
            s.push("地址：" + e.poi.district + e.poi.address);
            s.push("经纬度：" + e.poi.location);
            infoWindow.setContent(s.join("<br>"));
            infoWindow.open(map, marker.getPosition());
            $("#positionName").val(e.poi.name);
            $("#longitudeAndLatitude").val(e.poi.location);
            placeSearchInit.getDetails(e.poi.id, function (status, result) {
                if (status === 'complete' && result.info === 'OK' && result.poiList.pois != null) {
                    var obj = result.poiList.pois[0];
                    $("#detailAddress").val(obj.pname + obj.cityname + obj.address);
                }
            });
        }
        //地图取点
        AMap.event.addListener(map, 'click', function (e) {
            //清空提示信息
            $(".form-control").next().html("");
            var geocoder = new AMap.Geocoder({})
            geocoder.getAddress(e.lnglat, function (status, result) {
                if (status === 'complete' && result.info === 'OK' && result.regeocode.formattedAddress != null) {
                    placeSearchInit.search(result.regeocode.formattedAddress, function (status, result) {
                        if (status === 'complete' && result.info === 'OK' && result.poiList.pois != null) {
                            var poi = result.poiList.pois[0];
                            marker.setPosition(poi.location);
                            marker.setMap(map);
                            map.setCenter(marker.getPosition());
                            var s = [];
                            s.push("<b>名称：" + poi.name + "</b>");
                            s.push("地址：" + poi.pname + poi.cityname + poi.address);
                            s.push("经纬度：" + poi.location);
                            infoWindow.setContent(s.join("<br>"));
                            infoWindow.open(map, marker.getPosition());
                            $("#positionName").val(poi.name);
                            $("#detailAddress").val(poi.pname + poi.cityname + poi.address);
                            $("#longitudeAndLatitude").val(poi.location);
                        }
                    })
                }
            })
        })
    })
</script>